上一节我们学习了 Nuxt3 处理异常的各种方法,本讲我们将结合项目开发实践给大家介绍一些比较常用的配置项,为以后的项目开发做准备,本节涉及内容如下:
- 几种配置方式对比;
- 开发常用配置;
- 配置 Meta 信息。
# 几种配置方式对比
Nuxt 应用中有三种常见的配置方式:
- nuxt.config.ts:覆盖或扩展默认 Nuxt 配置;
- app.config.ts:配置公共变量;
- 外部配置文件:配置项目中其他方面。
# nuxt.config.ts
Nuxt 其实有一套默认配置,能够应付大部分需要。但是当我们需要覆盖或扩展默认 Nuxt 配置时,我们就可以在项目根目录下创建一个 nuxt.config.ts,它默认导出 defineNuxtConfig() 的执行结果,再和默认 nuxt 配置合并并最终生效,例如我们前面增加的模块配置:
arduino
复制代码export default defineNuxtConfig({
modules: [
"@nuxtjs/tailwindcss",
"@pinia/nuxt",
"@huntersofbook/naive-ui-nuxt",
],
});
@前端进阶之旅: 代码已经复制到剪贴板
我们会在后面演示一些开发中比较常见的配置方法。
# app.config.ts
如果需要配置一些项目需要的公共变量,可以在项目根目录创建 app.config.ts,这些变量是响应式的,不仅在运行时可以访问,还可以改变。例如下面的配置范例:
php
复制代码export default defineAppConfig({
title: 'Hello Nuxt',
theme: {
dark: true,
colors: {
primary: '#ff0000'
}
}
})
@前端进阶之旅: 代码已经复制到剪贴板
实际上,nuxt.config.ts 中有个 appConfig 选项可以起到相同的作用。
访问 app.config.ts 中的变量:
ini
复制代码 const appConfig = useAppConfig()
@前端进阶之旅: 代码已经复制到剪贴板
# 范例:根据配置项设置黑暗模式
创建 ~/pages/config.vue,根据 app.config.ts 中的配置控制黑暗模式和标题。
ini
复制代码<template>
<div :class="{ dark: appConfig.theme.dark }">
<p
class="bg-blue-300 dark:bg-slate-600 dark:text-slate-200"
@click="appConfig.title = 'hello'"
>
appConfig: {{ appConfig.title }}
</p>
<label>
dark mode:
<NSwitch id="toggle" v-model:value="appConfig.theme.dark" />
</label>
</div>
</template>
<script setup lang="ts">
const 